<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/Font/css/all.css" rel="stylesheet">
    <style>
        :root {
            --bg-color: #f4f7fa;
            --text-color: #333;
            --navbar-bg: #343a40;
            --navbar-text: #fff;
            --search-bar-bg: #f8f9fa;
            --card-bg: #fff;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #151515;
                --text-color: #fff;
                --navbar-bg: #2d2d2d;
                --search-bar-bg: #2d2d2d;
                --card-bg: #2d2d2d;
            }
        }

        .dark-mode {
            --bg-color: #151515;
            --text-color: #fff;
            --navbar-bg: #2d2d2d;
            --search-bar-bg: #2d2d2d;
            --card-bg: #2d2d2d;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            padding-top: 56px;
            transition: background-color 0.3s ease;
        }

        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background-color: var(--navbar-bg) !important;
            color: var(--navbar-text) !important;
        }

        .search-bar {
            background-color: var(--search-bar-bg);
            padding: 1rem 0;
            top: 56px;
            z-index: 1020;
            transition: background-color 0.3s ease;
        }

        .card {
            margin-bottom: 20px;
            background-color: var(--card-bg);
            transition: background-color 0.3s ease;
        }

        .card img {
            height: 200px;
            object-fit: cover;
        }

        .nav-link i {
            margin-right: 0.5rem;
            width: 1.25em;
            text-align: center;
        }
    </style>
</head>
<body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand">
                <i class="fas fa-video me-2"></i>{{ title }}
            </a>
            <button class="navbar-toggler" type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#mainNav" 
                    aria-controls="mainNav" 
                    aria-expanded="false" 
                    aria-label="切换导航">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" onclick="toggleDarkMode()">
                            <i id="theme-icon" class="fas fa-moon"></i>
                            <span>主题切换</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">
                            <i class="fas fa-home"></i>首页
                        </a>
                    </li>
                    {% if session.get('logged_in') %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('upload') }}">
                            <i class="fas fa-upload"></i>上传
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('logout') }}">
                            <i class="fas fa-sign-out-alt"></i>注销
                        </a>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('login') }}">
                            <i class="fas fa-sign-in-alt"></i>登录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('register') }}">
                            <i class="fas fa-user-plus"></i>注册
                        </a>
                    </li>
                    {% endif %}
                    <li class="nav-item">
                        <a class="nav-link" target="_blank" 
                           href="https://gitee.com/byusi/FoxCM">
                            <i class="fab fa-git-alt"></i>源码
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="search-bar">
        <div class="container">
            <form class="form-inline" action="{{ url_for('search') }}" method="get">
                <div class="input-group">
                    <input type="search" class="form-control" 
                           placeholder="搜索视频" name="q" aria-label="搜索">
                    <button class="btn btn-primary" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="container mt-4">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div class="alert alert-info">
            {% for message in messages %}
            <p class="mb-0">{{ message }}</p>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>

    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/sw.js').then(function(registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
          }, function(err) {
            console.log('ServiceWorker registration failed: ', err);
          });
        });
      }
    </script>
    <script>
      let deferredPrompt;
      window.addEventListener('beforeinstallprompt', (event) => {
        event.preventDefault();
        deferredPrompt = event;
        showInstallPromotion();
      });

      function showInstallPromotion() {
        const installButton = document.getElementById('install-button');
        installButton.style.display = 'block';
        installButton.addEventListener('click', async () => {
          const response = await deferredPrompt.prompt();
          deferredPrompt = null;
          if (response.outcome === 'accepted') {
            console.log('User accepted the A2HS prompt');
          } else {
            console.log('User dismissed the A2HS prompt');
          }
        });
      }
    </script>
    <script>
        // 主题切换功能
        function toggleDarkMode() {
            const body = document.body;
            body.classList.toggle('dark-mode');
            
            // 保存用户偏好
            const isDark = body.classList.contains('dark-mode');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
            
            // 更新图标
            const themeIcon = document.getElementById('theme-icon');
            themeIcon.classList.toggle('fa-moon');
            themeIcon.classList.toggle('fa-sun');
        }

        // 初始化主题
        function initializeTheme() {
            const savedTheme = localStorage.getItem('theme');
            const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            if (savedTheme === 'dark' || (!savedTheme && systemDark)) {
                document.body.classList.add('dark-mode');
                document.getElementById('theme-icon').classList.add('fa-sun');
            }
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', initializeTheme);
    </script>
</body>
</html>